<template>
  <div class="group-table-box">
    <el-row class="group-top">
      <el-col :span="8" :offset="16" class="group-right">
        <div class="input-item" style="margin: 0;">
          <el-button
            type="primary"
            size="small"
            @click="clickAddModal"
          >添加活动商品</el-button>
        </div>
      </el-col>
    </el-row>
    <el-tabs value="name1">
      <el-tab-pane label="团购" name="name1">
        <el-table
          :data="tableData"
          border
          :header-cell-class-name="'table-header'"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="活动开始时间">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="所属商品分类">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="原始价格">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="活动价格">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="团购量">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="状态">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="300px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="check(scope.$index, scope.row)"
              >结束活动</el-button>
              <el-button
                size="mini"
                type="success"
                @click="screen(scope.$index, scope.row)"
              >查看详情</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="screen(scope.$index, scope.row)"
              >删除记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="form.pageIndex"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="totalPageCount"
          style="text-align: center;margin-top: 20px;"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="预售" name="name2">
        <el-table
          :data="tableData"
          border
          :header-cell-class-name="'table-header'"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="活动开始时间">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="所属商品分类">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="原始价格">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="活动价格">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="团购量">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="状态">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="300px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="check(scope.$index, scope.row)"
              >结束活动</el-button>
              <el-button
                size="mini"
                @click="screen(scope.$index, scope.row)"
              >查看详情</el-button>
              <el-button
                size="mini"
                @click="screen(scope.$index, scope.row)"
              >删除记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="form.pageIndex"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="totalPageCount"
          style="text-align: center;margin-top: 20px;"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="拼单" name="name3">
        <el-table
          :data="tableData"
          border
          :header-cell-class-name="'table-header'"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="活动开始时间">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="所属商品分类">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="原始价格">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="活动价格">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="团购量">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="状态">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="300px"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="check(scope.$index, scope.row)"
              >结束活动</el-button>
              <el-button
                size="mini"
                @click="screen(scope.$index, scope.row)"
              >查看详情</el-button>
              <el-button
                size="mini"
                @click="screen(scope.$index, scope.row)"
              >删除记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page.sync="form.pageIndex"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="totalPageCount"
          style="text-align: center;margin-top: 20px;"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>

    <!-- 点击新增活动 -->
    <el-dialog
      :visible.sync="showAddModal"
    >
      <div class="modal-container">
        <el-row class="modal-content" :gutter="16">
          <el-col :span="6">
            <p class="modal-label">活动类型</p>
          </el-col>
          <el-col :span="18">
            <el-select v-model="form.activityType" placeholder="请选择" size="small">
              <el-option value="团购">团购</el-option>
              <el-option value="拼单">拼单</el-option>
            </el-select>
          </el-col>
        </el-row>
        <div class="" v-if="form.activityType == '拼单'">
          <el-row class="modal-content" :gutter="16">
            <el-col :span="6">
              <p class="modal-label">拼单商品选择</p>
            </el-col>
            <el-col :span="9">
              <el-select v-model="form.class" placeholder="请选择" size="small">
                <el-option value="撒钱活动">撒钱活动</el-option>
                <el-option value="VIP活动">VIP活动</el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-select v-model="form.class" placeholder="请选择" size="small">
                <el-option value="撒钱活动">撒钱活动</el-option>
                <el-option value="VIP活动">VIP活动</el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row class="modal-content" :gutter="16">
            <el-col :span="6">
              <p class="modal-label">拼单价格设置</p>
            </el-col>
            <el-col :span="18">
              <el-input
                v-model="form.price"
                placeholder="请输入..."
                size="small"
              >
                <span slot="append">元</span>
              </el-input>
            </el-col>
          </el-row>
          <el-row class="modal-content" :gutter="16">
            <el-col :span="6">
              <p class="modal-label">拼单人数上限</p>
            </el-col>
            <el-col :span="18">
              <el-input
                v-model="form.count"
                placeholder="请输入..."
                size="small"
              >
                <span slot="append">人</span>
              </el-input>
            </el-col>
          </el-row>
        </div>
        <div class="" v-if="form.activityType == '团购'">
          <el-row class="modal-content" :gutter="16">
            <el-col :span="6">
              <p class="modal-label">团购商品选择</p>
            </el-col>
            <el-col :span="9">
              <el-select v-model="form.class" placeholder="请选择" size="small">
                <el-option value="撒钱活动">撒钱活动</el-option>
                <el-option value="VIP活动">VIP活动</el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <el-select v-model="form.class" placeholder="请选择" size="small">
                <el-option value="撒钱活动">撒钱活动</el-option>
                <el-option value="VIP活动">VIP活动</el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row class="modal-content" :gutter="16">
            <el-col :span="6">
              <p class="modal-label">团购价格设置</p>
            </el-col>
            <el-col :span="18">
              <el-input
                v-model="form.price"
                placeholder="请输入..."
                size="small"
              >
                <span slot="append">元</span>
              </el-input>
            </el-col>
          </el-row>
          <el-row class="modal-content" :gutter="16">
            <el-col :span="6">
              <p class="modal-label">团购人数上限</p>
            </el-col>
            <el-col :span="18">
              <el-input
                v-model="form.count"
                placeholder="请输入..."
                size="small"
              >
                <span slot="append">人</span>
              </el-input>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="modal-footer">
          <el-button type="primary" @click="onClickAddConfirm" size="small">完成</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showAddModal: false,
      isLoading: false,
      form: {
        pageIndex: 1,
        activityType: ''
      },
      totalPageCount: 10,
      tableData: [{
        groupStatusText: '123123'
      }],
      checkReturnData: {
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  watch: {
  },
  methods: {
    onClickSearch() {

    },
    clickAddModal() {
      // 点击添加活动商品
      this.showAddModal = true
    },
    onClickAddConfirm() {
      // 点击modal的确定按钮

    },
    onClickReset() {

    },
    onClickDeleteConfirm() {

    },
    check(index) {

    },
    getTableData(index) {

    },
    onClickDatePickerChange(e) {
      // ["2018-08-07", "2018-09-12"]
      // this.form.date = e;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-flex {
  display: inline-flex !important;
  flex-direction: column;
}
.pull-right {
  float: right;
}
.group-top {
  display: flex;
  align-items: flex-end;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item {
  display: inline-block;
  margin: 0 20px 20px 0;
  color: #000;
}
.input-btn {
  margin-right: 10px;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
  color: #000;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  line-height: 32px;
  font-size: 14px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
